<template>
	<view class="content">
		<uni-notice-bar :show-icon="true" :scrollable="true" :speed="40" :single="true" :text="notice" />
		<view class="uni-margin-wrap">
			<swiper class="home-swiper-banner" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<image :src="item.img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">预选套餐：</text></view>
				<view class="uni-input-wrapper" style="text-align: left;display: block;" v-if="project.length>0">
					<picker @change="bindPickerChange" :value="seveData.project" :range="project" range-key="desc">
						<view class="uni-input">{{project[seveData.project].desc}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">预定时间：</text></view>
				<view class="uni-input-wrapper">
					<picker mode="time" :value="seveData.time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{seveData.time||"尽快"}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">手机号：</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" v-model="seveData.phone" placeholder="请输入" />
				</view>
			</view>
			<view class="uni-form-item uni-column" @click="tomap()">
				<view class="title"><text class="uni-form-item__title">上门地址：</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" 
					placeholder="请选择地址" v-model="seveData.startAddress"  />
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">地址详情：</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" v-model="seveData.addressdesc" placeholder="请输入" />
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">备注：</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" v-model="seveData.desc" placeholder="请输入" />
				</view>
			</view>
			<view v-if="project.length>0"  class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">项目时长：</text></view>
				<view class="uni-input-wrapper">
					{{project[seveData.project].time}}分钟
				</view>
			</view>
			<view v-if="project.length>0"  class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">已售：</text></view>
				<view class="uni-input-wrapper">
					{{project[seveData.project].saleCount}}
				</view>
			</view>
			<view v-if="project.length>0"  class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">项目价格：</text></view>
				<view class="uni-input-wrapper">
					{{project[seveData.project].price}}元
				</view>
			</view>
			<view v-if="project.length>0"  class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">项目描述：</text></view>
				<view class="uni-input-wrapper">
					{{project[seveData.project].content}}
				</view>
			</view>
			<button class="parsing" @click="sub()" hoverClass="parsing-btn-hover">提交</button>
			<button open-type="contact" class="parsing">联系客服</button>
			<button class="parsing" open-type="share" hoverClass="parsing-btn-hover">转发邀请好友</button>
			
			 <view style="font-size: 12px;height: 50px; color: aqua;text-align: center;">
				 温馨提示：提交后会有相关人员上门联系上门服务。。
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners:[],
				notice:"",
				project: [],
				seveData:{latitude:0,
				project:0,
				projectName:"",
				time:'',
				longitude:0,startAddress:'',phone:"",addressdesc:"",desc:""},
				markers: [],
			}
		},
		onShareAppMessage(res) {
			return {
				title: '上门预约，快来吧~~',
				path: '/pages/apponitment/index?invitation='+this.$store.state.userInfo._id
			}
		},
		onShareTimeline(res) {
			return {
				title: '上门预约，快来吧~~',
				path: '/pages/apponitment/index?invitation='+this.$store.state.userInfo._id
			}
		},
		onLoad() {
			//#ifdef MP
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},
		mounted() {
			uni.getLocation({
				success: (res) => {
					this.seveData.longitude=res.longitude
					this.seveData.latitude=res.latitude
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/regeo?location='+res.longitude.toFixed(6)+','+ res.latitude.toFixed(6)+
						'&key=739917e6ef56e4e27e30921366cc1d95',
						success: (data) => {
							this.seveData.startAddress=data.data.regeocode.formatted_address
						}
					})
				}
			})
			uniCloud.callFunction({
				name: 'project',
				data:{action:"get"}
			}).then((res) => {
				this.project=res.result.data
			})
			uniCloud.callFunction({
				name: 'banner',
				data:{action:"get"}
			}).then((res) => {
				this.banners=res.result.data
			})
			uniCloud.callFunction({
				name: 'notice',
				data:{action:"get",type:1}
			}).then((res) => {
				this.notice=res.result.data[0].content
			})
		},
		methods: {
			bindTimeChange(e){
				this.seveData.time=e.target.value
			},
			bindPickerChange: function(e) {
				this.seveData.project = e.detail.value
			},
			
			tomap(index){
				uni.chooseLocation({
				    success:  (res)=> {
						this.seveDatalongitude=res.longitude
						this.seveDatalatitude=res.latitude
						this.seveData.startAddress=res.address
				    }
				});
			},
			pay(){
				
			},
			sub() {
				const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
				if(!phoneReg.test(this.seveData.phone)){
					uni.showToast({
						icon:'none',
						mask:true,
						title:'手机号格式错误'
					})
					return;
				}else if(!this.seveData.addressdesc){
					uni.showToast({
						icon:'none',
						mask:true,
						title:'地址不能为空'
					})
					return;
				}
				this.seveData.projectName=this.project[this.seveData.project].name
				this.seveData.time=this.project[this.seveData.project].time
				this.seveData.price=this.project[this.seveData.project].price
				uniCloud.callFunction({
					name: 'appointment',
					data: {
						action: 'add',
						data: this.seveData
					}
				}).then((res)=>{
					uni.showModal({
						showCancel: false,
						content: '提交成功，预计一个小时上门请注意接听电话！'
					})
				})
			}
		}
	}
</script>

<style>
	.parsing{
		margin: 10px auto;
		font-size: 15px;
		overflow: hidden;
		display: block;
		width: 664rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		background-color: #337aff;
		box-shadow: 0 14rpx 28rpx rgba(51,122,255,0.3);
	}
	.parsing-btn-hover {
	    background: #3f6ddd;
	    border: 1px solid #1e4ecb;
	}
	.home-swiper-banner{
		height: 440rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
	}
	.home-swiper-banner image{
		width: 100%;
		height: 440rpx;
	}
</style>
<style scoped>
    .nvue-page-root {
        background-color: #F8F8F8;
        padding-bottom: 20px;
    }
.uni-noticebar{
	margin-bottom: 0px;
}
    .page-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 35rpx;
    }

    .page-title__wrapper {
        padding: 0px 20px;
        border-bottom-color: #D8D8D8;
        border-bottom-width: 1px;
    }

    .page-title__text {
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        color: #BEBEBE;
    }

    .title {
		width: 90px;
		    flex-shrink: 0;
		text-align: right;
        line-height: 44px;
            padding: 0px 13px;
    }
.uni-form-item{
	display: flex;
}
    .uni-form-item__title {
        font-size: 16px;
        line-height: 24px;
    }

    .uni-input-wrapper {
       display: block;
        padding: 8px 13px;
		width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #FFFFFF;
    }

    .uni-input {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
        padding: 0px;
        flex: 1;
        background-color: #FFFFFF;
    }

    .uni-icon {
        font-family: uniicons;
        font-size: 24px;
        font-weight: normal;
        font-style: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #999999;
    }

    .uni-eye-active {
        color: #007AFF;
    }
</style>
